<!DOCTYPE html>
<html>
<head>
<title>Prompts.js</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 16px;
  margin: 2rem;
  padding: 2rem;
  max-width: 800px;
  margin: 2rem auto;
  line-height: 1.6;
}
input, textarea {
  font-size: 16px;
}
.button-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.button-container button {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.result {
  margin-top: 10px;
  padding: 10px;
  background-color: #f4f4f4;
  border-radius: 4px;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/prompts-js"></script>
</head>
<body>
<h1>Prompts.js</h1>
<p>A lightweight JavaScript library for creating modal dialogs with alert, confirm, and prompt functionalities.</p>
<pre style="font-size: 0.8em; white-space: pre-wrap">
await Prompts.alert("This is an alert message!");
const resultBoolean = await Prompts.confirm("Do you want to proceed?");
const name = await Prompts.prompt("What is your name?");
</pre>

<div class="button-container">
  <button id="alertBtn">Show Alert</button>
  <button id="confirmBtn">Show Confirm</button>
  <button id="promptBtn">Show Prompt</button>
</div>

<div id="resultArea" class="result"></div>

<script type="module">
const resultArea = document.getElementById('resultArea');

document.getElementById('alertBtn').addEventListener('click', async () => {
  await Prompts.alert("This is an alert message!");
  resultArea.textContent = "Alert was shown and dismissed.";
});

document.getElementById('confirmBtn').addEventListener('click', async () => {
  const result = await Prompts.confirm("Do you want to proceed?");
  resultArea.textContent = `Confirm result: ${result}`;
});

document.getElementById('promptBtn').addEventListener('click', async () => {
  const name = await Prompts.prompt("What is your name?");
  resultArea.textContent = name ? `Hello, ${name}!` : "Prompt was cancelled.";
});
</script>
</body>
</html>
